<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '企业名称', key: 'companyName', sortable: false},
    // {title: '企业类型', key: 'companyType', sortable: false},
    {title: '报名活动', key: 'activityId', sortable: false},
    {title: '活动编号', key: 'activityCode', sortable: false},
    {title: '报名时间', key: 'createTime', sortable: false},
    {title: '审批状态', key: 'status', sortable: false},
    {title: '审批', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const companyList = ref([
    {value:'48',title:'党委机关'},
    {value:'50',title:'事业单位'},
    {value:'51',title:'电子政务'},
    {value:'52',title:'政府机关'},
    {value:'53',title:'大型国企'},
    {value:'54',title:'其他单位'}
]);

const search = ref('');
const name = ref(null);
const activityId = ref(null);
watch(name, () => {
    search.value = name.value
})
watch(activityId, () => {
    search.value = activityId.value
})

function loadItems({page, itemsPerPage}) {
    pageNo.value = page
    loading.value = true;
    axios.post('/companyAttack/select', {
        pageNo: pageNo.value,
        pageSize: itemsPerPage,
        delFlag: 1,
        companyType: name.value,
        activityId: activityId.value
    }).then(res => {
        items.value = res.data.records;
        axios.post("/activity/select", {pageNo:1,pageSize:1000}).then(res => {
            activityList.value = res.data.records
            items.value.forEach(item => {
                activityList.value.forEach(k => {
                    if(item.activityId == k.id) {
                        item.activityCode = k.code
                    }
                })
            })
            loading.value = false;
        })
        totalItems.value = res.data.total;
    })
}

const activityList = ref([]);
onMounted(() => {});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    companyName: "",
    companyType: "1",
    bLon: "",
    bLat: ""
});

function resetEditedItem() {
    editedItem.value = {
        companyName: "",
        companyType: "1",
        bLon: "",
        bLat: ""
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.status += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/companyAttack/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/companyAttack/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    }
}

// 删
const beDeleteItem = ref({})
const status = ref(null)

function clickDelete(item, type) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
    status.value = type
}

function clickDeleteConfirm() {
    axios.post('/companyAttack/check', { id: beDeleteItem.value.id, status: status.value }).then(() => {
        snackbar.info("审批成功")
        loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = {}
    status.value = null
}

function clickUpload() {}

const attackUserShow = ref(false);
const checkData = ref([]);
function checkAccount(val) {
    attackUserShow.value = true
    let obj = {
        pageNo: 1,
        pageSize: 10,
        activityId: val.activityId,
        attackId: val.id
    }
    axios.post("/attackUser/select", obj).then(res => {
        checkData.value = res.data.records
        attackUserShow.value = true
    })
}
</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>攻方企业管理</v-toolbar-title>
        <v-select :items="companyList" v-model="name" :clearable="true" hide-details label="查询企业类型"></v-select>
        <v-autocomplete :items="activityList" item-title="name" item-value="id" v-model="activityId" :clearable="true" hide-details label="查询活动"></v-autocomplete>
        <v-tooltip text="导入企业" location="bottom">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-upload" v-on:click="clickUpload" v-bind="props"></v-btn>
            </template>
        </v-tooltip>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ status == 2 ? '通过' : '拒绝' }}'{{ beDeleteItem.companyName }}'?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>

    <v-dialog v-model="attackUserShow" max-width="500px">
        <v-card
        v-if="checkData.length > 0"
        subtitle="企业名称"
        :text="'报名时间：' + checkData[0].createTime"
        :title="checkData[0].attackName">
            <div style="margin: 5px 20px 10px;" v-for="item in checkData">
                <v-card
                variant="tonal"
                :text="`${item.userType == 2 ? '队长' : '成员'}-${item.sex == 1 ? '男' : '女'}-${item.isStay == 1 ? '住宿' : '不住宿'}`"
                :title="`${item.name}-${item.idCard}`"
                :subtitle="'手机号：' + item.userName"></v-card>            
            </div>
            <!-- <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn v-if="checkData[0].status == 1" variant="tonal" @click="clickDelete(checkData[0], 2)">通过</v-btn>
                &nbsp;&nbsp;
                <v-btn v-if="checkData[0].status == 1" variant="tonal" @click="clickDelete(checkData[0], 0)">拒绝</v-btn>
                <v-spacer></v-spacer>
            </v-card-actions> -->
        </v-card>
    </v-dialog>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.companyType="{ item }">
            <span v-for="k in companyList" v-show="k.value == item.companyType">
                {{ k.title }}
            </span>
        </template>
        <template v-slot:item.activityId="{ item }">
            <span v-for="k in activityList" v-show="k.id == item.activityId">
                {{ k.name }}
            </span>
        </template>
        <template v-slot:item.status="{ item }">
            <span v-if="item.status == 0">不通过</span>
            <span v-if="item.status == 1">待审批</span>
            <span v-if="item.status == 2">已通过</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-account-search" variant="text" @click="checkAccount(item)"></v-btn>
            &nbsp;&nbsp;
            <v-btn v-if="item.status == 1" @click="clickDelete(item, 2)">通过</v-btn>
            &nbsp;&nbsp;
            <v-btn v-if="item.status == 1" variant="tonal" @click="clickDelete(item, 0)">拒绝</v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
